import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';
import ReactScrollbar from 'react-scrollbar-js';
require("./home.css");

class Job extends React.Component {

    constructor(props){
        super(props);
        const userSessionStorage = JSON.parse(window.sessionStorage.getItem('userStorage'));
        this.state={
            queryJob: [],
            loginCompanyID: userSessionStorage.company_id,
            addJob: ''
        }
    }

    // 在组件渲染之前预加载数据
    componentWillMount(){
        this.LoadData();
    }

    // 一开始获得本公司的所有岗位，将获得的信息转化为string存到query数组里面
    LoadData(){
        fetch("http://121.196.202.247:1010/station/?format=json", {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                "Content-Type": "application/json; charset=utf-8"
            },
            body: JSON.stringify({
                company_id: this.state.loginCompanyID,
            })
        }) .then((response) => response.json())
            .then((responseText) => {
                this.setState({queryJob : responseText});
                console.log("111"+this.state.queryJob);
                console.log("2222"+JSON.stringify(this.state.queryJob));
            }).catch((error) => {alert(error+"连接职信服务器失败，请查看网络连接状态并刷新页面！")});
    }

    // 添加新岗位按钮
    addJob(e){
        e.preventDefault();

    }

    // 添加的岗位值
    handleChange(e){
        this.setState({addJob: e.target.value});
    }

    // 添加新岗位按钮
    handleSubmit(){
        if(this.state.addJob == ''){
            alert("请输入要添加的新岗位！");
        }else{
            fetch("http://121.196.202.247:1010/station/?format=json", {
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    "Content-Type": "application/json; charset=utf-8"
                },
                body: JSON.stringify({
                    station_name: this.state.addJob,
                    company_id: this.state.loginCompanyID,
                })
            }) .then((response) => response.json())
                .then((responseText) => {
                    this.setState({queryJob:responseText});
                    console.log(JSON.stringify(this.state.queryJob));
                    alert("添加新岗位成功！");
                    this.setState({addJob:''});
                }).catch((error) => {alert(error+"连接职信服务器失败，请查看网络连接状态并刷新页面！")});
        }
    }

    render() {
        const style = {
            scroll:{
                width: "480px",
                height: "300px",
            }
        };

        let body = [];
        console.log(this.state.queryJob+"aaa");
        if(this.state.queryJob == ''){
            body.push(<p>当前公司还未设置岗位...</p>);
        }else{
            console.log(this.state.queryJob.length);
            body.length = 0;
            body.push(<p>当前公司现共有{this.state.queryJob.length}个岗位，如下：</p>);
            for(let i=0;i<this.state.queryJob.length;i++){
                body.push(<p>{i+1}.&nbsp;{this.state.queryJob[i].station_name}</p>);
            }
        }

        return (
        <div className="job_box">
            <div>
                <p>添加新岗位</p>
                <form onSubmit={function (e) {this.handleSubmit(e)}.bind(this)}>
                    <input type="text" placeholder="请填入新岗位" className="add_job_text" value={this.state.addJob} onChange={this.handleChange.bind(this)}/>
                    <input type="submit" className="add_job_commit" value="添加"/>
                </form>
            </div>
            <br/>
            <br/>
            <div className="add_job_info">
                <ReactScrollbar style={style.scroll}>
                    <div>
                        <hr/>
                        {body}
                    </div>
                </ReactScrollbar>
            </div>
        </div>
        );
    }
}

export default Job;